<template>
  <el-drawer
    :title="title"
    :visible.sync="drawer"
    direction="rtl"
    size="60%"
    @close="handleClose"
  >
    <el-form label-width="80px" :model="form" :rules="rules" ref="formRef">
      <el-form-item label="标题" prop="stem">
        <el-input v-model="form.stem"></el-input>
      </el-form-item>
      <el-form-item label="内容" prop="content">
        <quillEditor
          v-model="form.content"
          @blur="$refs.formRef.validateField('content')"
        ></quillEditor>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="save">确认</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
  </el-drawer>
</template>

<script>


export default {
  props: {
    rowe: {
      type: Object,
      default() {
        return {};
      },
    },
    drawer: {
      type: Boolean,
      default: false,
    },
  },
  components: {
    quillEditor,
  },
  data() {
    return {
      
      //drawer:false,
      rules: {
        stem: [{ required: true, message: "请输入标题", trigger: "blur" }],
        content: [{ required: true, message: "请输入内容", trigger: "blur" }],
      },
    };
  },
  methods: {
    handleClose() {
      // console.log(drawer);
      this.$refs.formRef.resetFields();
      this.$emit("drawerFn", drawer);
    },
    async save() {
      try {
        await this.$refs.formRef.validate();
        await addInterview(this.form);
        this.getInterviewList();
        this.drawer = false;
      } catch (err) {
        console.log(err);
      }
    },
  },
  watch: {
    rowe: {
      deep: true,
      handler(newVal, oldVal) {
        //console.log(newVal, oldVal);
        this.form = newVal;
      },
    },
    drawer: {
      handler(newVal, oldVal) {
        console.log();
        // console.log(this.drawer---'111');
      },
    },
  },
};
</script>

<style></style>
